<!DOCTYPE html>
<html>
  <head>
    <title>Custom Icons Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script type="text/javascript" src="eu-countries.js"></script>

    <script>
      var map = L.map('map')
      // 创建自定义窗格
      map.createPane('labels')

      // 获取窗格元素并设置窗格层级，使窗格的层级在标记与弹窗之间
      // https://github.com/Leaflet/Leaflet/blob/v1.0.0/dist/leaflet.css#L87
      map.getPane('labels').style.zIndex = 650

      // 窗格不捕捉点击或触摸事件，事件由底下的 GeoJSON 或标记触发
      map.getPane('labels').style.pointerEvents = 'none'

      var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'

      // 创建地图瓦片
      var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution
      }).addTo(map)

      // 创建地图标签瓦片
      var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution,
        pane: 'labels' // 使用窗格选项
      }).addTo(map)

      geojson = L.geoJson(euCountries).addTo(map)

      geojson.eachLayer(function (layer) {
        layer.bindPopup(layer.feature.properties.name)
      })

      map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 4)
    </script>
  </body>
</html>
